import React, { PureComponent } from 'react'

// import classNames from 'classnames'
import moment from 'moment'

import { Button, DatePicker } from 'antd';
import { PoweroffOutlined } from '@ant-design/icons';
import 'antd/dist/antd.css'

import Home from 'components/home'

export default class App extends PureComponent {
  state = {
    loadings: [],
  };

  enterLoading = index => {
    this.setState(({ loadings }) => {
      const newLoadings = [...loadings];
      newLoadings[index] = true;

      return {
        loadings: newLoadings,
      };
    });
    setTimeout(() => {
      this.setState(({ loadings }) => {
        const newLoadings = [...loadings];
        newLoadings[index] = false;

        return {
          loadings: newLoadings,
        };
      });
    }, 6000);
  };

  render() {
    const { loadings } = this.state;

    return (
      <>
        <Home/>
        <Button type="primary" loading>
          Loading
        </Button>
        <Button type="primary" size="small" loading>
          Loading
        </Button>
        <Button type="primary" icon={<PoweroffOutlined />} loading />
        <br />
        <Button type="primary" loading={loadings[0]} onClick={() => this.enterLoading(0)}>
          Click me!
        </Button>
        <Button
          type="primary"
          icon={<PoweroffOutlined />}
          loading={loadings[1]}
          onClick={() => this.enterLoading(1)}
        >
          Click me!
        </Button>
        <Button
          type="primary"
          icon={<PoweroffOutlined />}
          loading={loadings[2]}
          onClick={() => this.enterLoading(2)}
        />
        <DatePicker defaultValue={moment('2015/01/01', 'YYYY/MM/DD')} format={'YYYY/MM/DD'} allowClear={false} />
      </>
    )
  }
}

// 知识点 classname
// export default class App extends PureComponent {
//   constructor(props) {
//     super(props)

//     this.state = {
//       isActive: true
//     }
//   }
  
//   render() {
//     const { isActive } = this.state
//     const isBar = false
//     const errClass = 'error'

//     return (
//       <div>
//         <h2 className={'foo bar active title'}>Title One</h2>
//         <h2 className={'title ' + (isActive ? 'active' : '')}>Title Two</h2>
//         <h2 className={['title', (isActive ? 'active' : '')].join(' ')}>Title There</h2>

//         {/* classnames库添加class */}
//         <h2 className={classNames('foo', 'bar', 'active', 'title')}>Title</h2>
//         <h2 className={classNames({'active': isActive, 'bar': isBar}, 'title')}>Title</h2>
//         <h2 className={classNames(errClass)}>Title</h2>
//         <h2 className={classNames(['active', 'title'])}>Title</h2>
//         <h2 className={classNames(['active', 'title', {'bar': isActive}])}>Title</h2>
//       </div>
//     )
//   }
// }